<template>
  <div>
    <h1>学生信息管理</h1>

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="宿舍">
        <el-select v-model="form.rid" placeholder="请选择宿舍" clearable>
          <el-option v-for="r in rooms" :label="r.name" :value="r.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生日">
        <el-col :span="11">
          <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.date1"
                          style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.date2"
                          style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage">查询</el-button>
        <el-button type="primary" @click="toAdd">添加</el-button>
        <el-button type="primary" @click="delAll">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="ID">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄">
      </el-table-column>
      <el-table-column
          label="性别">
        <template slot-scope="scope">
          {{ scope.row.sex === 0 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column
          prop="hobby"
          label="爱好">
      </el-table-column>
      <el-table-column
          prop="birthday"
          label="生日">
      </el-table-column>
      <el-table-column
          prop="rname"
          label="宿舍名">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="toUpdate(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="toDel(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2,4,6,8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-dialog :title="pojo.id==null?'添加学生':'修改学生'" :visible.sync="dialogFormVisible">
      <el-form :model="pojo">
        <el-form-item label="姓名">
          <el-input v-model="pojo.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="pojo.age"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="pojo.sex" :label="0">男</el-radio>
          <el-radio v-model="pojo.sex" :label="1">女</el-radio>
        </el-form-item>
        <el-form-item label="爱好">
          <el-checkbox-group v-model="hobby">
            <el-checkbox label="篮球" name="type"></el-checkbox>
            <el-checkbox label="足球" name="type"></el-checkbox>
            <el-checkbox label="排球" name="type"></el-checkbox>
            <el-checkbox label="棒球" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="pojo.birthday"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="宿舍">
          <el-select v-model="pojo.rid" placeholder="请选择宿舍" clearable>
            <el-option v-for="r in rooms" :label="r.name" :value="r.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pojo={};hobby=[];dialogFormVisible = false;">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 4,
      total: 0,
      form: {},
      rooms: [],
      pojo: {},
      dialogFormVisible: false,
      hobby: [],
      multipleSelection: [],
    }
  },
  created() {
    this.findPage();
    this.findRooms();
  },
  methods: {
    delAll() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'info',
          message: '请至少选择一条数据进行删除操作！'
        });
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post("/student/delAll", this.multipleSelection).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.findPage();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    toDel(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get("/student/del?id=" + row.id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.findPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    toUpdate(row) {
      this.pojo = JSON.parse(JSON.stringify(row));
      this.hobby = this.pojo.hobby.split(",");
      this.dialogFormVisible = true;
    },
    add() {
      this.pojo.hobby = this.hobby.join(",");
      this.axios.post("/student/add", this.pojo).then(res => {
        // 关闭弹出框
        this.dialogFormVisible = false;
        // 清空数据
        this.pojo = {};
        this.hobby = {};
        // 刷新页面
        this.findPage();
      });
    },
    toAdd() {
      this.dialogFormVisible = true;
    },
    findRooms() {
      this.axios.get("/room/findAll").then(res => {
        this.rooms = res.data;
      });
    },
    findPage() {
      this.axios.post(`/student/findPage?pn=${this.pageNum}&ps=${this.pageSize}`, this.form).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findPage();
    },
  }
}
</script>


<style>

</style>